<template>
  <view class="container">
    <!-- 商品图片轮播 -->
    <swiper class="product-swiper" indicator-dots autoplay interval="3000">
      <swiper-item v-for="(img, index) in product.images" :key="index">
        <image :src="img" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- 商品基本信息 -->
    <view class="product-info">
      <text class="product-name">{{ product.name }}</text>
      <view class="price-row">
        <text class="price">¥{{ product.price }}</text>
        <text class="original-price">¥{{ product.originalPrice }}</text>
      </view>
      <view class="sales">
        <text>销量: {{ product.sales }}</text>
        <text>评价: {{ product.reviews }}</text>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="detail-section">
      <view class="section-header">商品详情</view>
      <view class="detail-content">
        <text>{{ product.detail }}</text>
        <image v-for="(img, index) in product.detailImages" :key="index" :src="img"></image>
      </view>
    </view>

    <!-- 农户故事 -->
    <view class="farmer-section">
      <view class="section-header">农户故事</view>
      <view class="farmer-info">
        <image :src="product.farmerAvatar" class="farmer-avatar"></image>
        <view class="farmer-desc">
          <text class="farmer-name">{{ product.farmerName }}</text>
          <text class="farmer-location">{{ product.farmerLocation }}</text>
        </view>
      </view>
      <text class="farmer-story">{{ product.farmerStory }}</text>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="cart-icon" @click="goCart">
        <image src="/static/cart-icon.png"></image>
        <text>{{ cartCount > 0 ? cartCount : '' }}</text>
      </view>
      <button class="add-cart-btn" @click="addToCart">加入购物车</button>
      <button class="buy-now-btn" @click="buyNow">立即购买</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 商品详情数据
const product = ref({
  id: 1,
  name: '农家百花蜜',
  price: 49.9,
  originalPrice: 59.9,
  sales: 128,
  reviews: 56,
  images: ['/static/product-honey1.jpg', '/static/product-honey2.jpg', '/static/product-honey3.jpg'],
  detail: '这款百花蜜产自云南深山，由当地蜂农采用传统方式养殖，不添加任何防腐剂和添加剂，保留了蜂蜜的天然营养成分。',
  detailImages: ['/static/detail1.jpg', '/static/detail2.jpg'],
  farmerAvatar: '/static/farmer-avatar.jpg',
  farmerName: '李大叔蜂场',
  farmerLocation: '云南省大理州',
  farmerStory: '我叫李大山，从事养蜂工作已经30年了。我们家的蜜蜂都是在无污染的深山里自由采蜜，产出的蜂蜜香甜可口，营养丰富。希望通过电商平台，能让更多人品尝到真正的好蜂蜜。'
});

// 购物车数量
const cartCount = ref(0);

// 页面加载时获取商品ID并加载数据
onLoad((options) => {
  // 实际项目中应通过ID从服务器获取商品详情
  console.log('商品ID:', options.id);
  
  // 获取购物车数量
  const cartItems = uni.getStorageSync('cartItems') || [];
  cartCount.value = cartItems.length;
});

// 跳转到购物车
const goCart = () => {
  uni.navigateTo({ url: '/pages/cart/index' });
};

// 加入购物车
const addToCart = () => {
  // 获取当前购物车数据
  let cartItems = uni.getStorageSync('cartItems') || [];
  
  // 检查商品是否已在购物车中
  const existIndex = cartItems.findIndex(item => item.id === product.value.id);
  
  if (existIndex !== -1) {
    // 已存在，增加数量
    cartItems[existIndex].count += 1;
  } else {
    // 不存在，添加新商品
    cartItems.push({
      id: product.value.id,
      name: product.value.name,
      image: product.value.images[0],
      price: product.value.price,
      count: 1,
      checked: true
    });
  }
  
  // 保存购物车数据
  uni.setStorageSync('cartItems', cartItems);
  cartCount.value = cartItems.length;
  
  // 提示成功
  uni.showToast({
    title: '已加入购物车',
    icon: 'success',
    duration: 2000
  });
};

// 立即购买
const buyNow = () => {
  // 直接跳转到结算页
  uni.navigateTo({ url: '/pages/order/confirm' });
};
</script>

<style scoped>
.container {
  padding-bottom: 120rpx; /* 底部栏高度 */
}

.product-swiper {
  height: 800rpx;
}

.product-info {
  padding: 30rpx;
  background-color: #fff;
}

.product-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.price-row {
  display: flex;
  align-items: baseline;
  margin-top: 20rpx;
}

.price {
  font-size: 40rpx;
  font-weight: bold;
  color: #e60012;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 20rpx;
}

.sales {
  display: flex;
  margin-top: 20rpx;
}

.sales text {
  font-size: 24rpx;
  color: #666;
  margin-right: 40rpx;
}

.detail-section, .farmer-section {
  margin-top: 20rpx;
  background-color: #fff;
}

.section-header {
  padding: 20rpx 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  border-bottom: 1rpx solid #eee;
}

.detail-content {
  padding: 30rpx;
}

.detail-content text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.detail-content image {
  width: 100%;
  margin-top: 20rpx;
}

.farmer-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
}

.farmer-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
}

.farmer-desc {
  margin-left: 30rpx;
}

.farmer-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.farmer-location {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.farmer-story {
  display: block;
  padding: 0 30rpx 30rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  display: flex;
  border-top: 1rpx solid #eee;
  background-color: #fff;
}

.cart-icon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cart-icon image {
  width: 50rpx;
  height: 50rpx;
}

.cart-icon text {
  position: absolute;
  top: 10rpx;
  right: 30rpx;
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  background-color: #e60012;
  color: #fff;
  border-radius: 15rpx;
  font-size: 20rpx;
}

.add-cart-btn, .buy-now-btn {
  flex: 2;
  font-size: 32rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-cart-btn {
  background-color: #ff9500;
}

.buy-now-btn {
  background-color: #e60012;
}
</style>